<style scoped>
.layout {
  background: #f5f7f9;
  position: relative;
  overflow: hidden;
}

.layout-footer {
  height: 10vh;
  background: #fff;
  padding: 0;
}

.layout-content {
  height: 90vh;
  background: #fff;
}
</style>
<template>
  <div class="layout">
    <Layout>
      <Content class="layout-content">
        <router-view></router-view>
      </Content>
      <Footer class="layout-footer">
        <LogoPlayer
          :music="currentMusic"
          :musicList="playlist"
          :currentIndex="currentIndex"
          :autoplay="true"
          :onIndexChange="setCurrentIndex"
          :prepareMusic="prepareMusic"
        ></LogoPlayer>
      </Footer>
    </Layout>
  </div>
</template>
<script>
import Aplayer from "vue-aplayer";
import { Divider } from "iview";
import LogoPlayer from "../components/player/logo-player";
import * as types from "../store/consts/mutation-types";
import { mapActions, mapGetters } from "vuex";
import musicApi from "@suen/music-api";
import { constants } from "http2";

export default {
  components: {
    Aplayer,
    Divider,
    LogoPlayer
  },
  data() {
    return {};
  },
  created() {},
  computed: {
    ...mapGetters(["currentMusic", "playlist", "currentIndex"])
  },
  watch: {},
  methods: {
    prepareMusic(music) {
      return new Promise((resolve, reject) => {
        musicApi.qq
          .getSongUrl(music.id, music.br || 320000)
          .then(response => {
            resolve(response.data);
          })
          .catch(err => {
            console.log(err);
            reject();
          });
      });
    },
    ...mapActions(["setPlaylist", "setCurrentIndex"])
  }
};
</script>